<template>
  <div class="filter">
    <el-dialog
      width="80%"
      title="过滤条件"
      :visible.sync="filterBoxVisible"
      append-to-body
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="title">
        <span>与/或</span>
        <span>列</span>
        <span>运算符</span>
        <span>值</span>
      </div>
      <div class="content">
        <filter-condition
          v-for="(condition, index) in conditionList"
          :key="index"
          :columnValues="columnValues"
          :condition="condition"
          :columns="columns"
          :index="index"
          :types="types"
          v-on:set-condition="setCondition"
          v-on:remove-condition="removeCondition"
        ></filter-condition>
      </div>
      <el-button @click="appendCondition">添加子句</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setFilterConditionBoxVisble(false)">取 消</el-button>
        <el-button type="primary" @click="filter">过 滤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FilterCondition from "@/components/FilterCondition";

export default {
  components: {
    FilterCondition,
  },
  props: [
    "filterBoxVisible",
    "conditionList",
    "columnValues",
    "types",
    "columns",
    "sheetName"
  ],
  data() {
    return {};
  },
  created() {},
  methods: {
    setFilterConditionBoxVisble(val) {
      this.$emit("set-filter-box-visble", val);
    },
    setCondition(index, condition) {
      this.$emit("set-condition", index, condition);
    },
    getActiveColumn() {
      let lastIndex = this.conditionList.length - 1;

      return this.conditionList[lastIndex].column;
    },
    getType(column) {
      let type = "";
      for (let i = 0; i < this.columns.length; i++) {
        if (column == this.columns[i]) {
          type = this.types[i - 1];
        }
      }

      return type;
    },
    removeCondition(index) {
      this.$emit("remove-condition", index);
    },
    appendCondition() {
      let column = this.getActiveColumn();

      let condition = {
        column,
        operator: null,
        value: "",
      };

      this.$emit("append-condition", condition);
    },
    formatFilterParame() {
      let condition = "";
      let strTypes = ['object', 'category', 'datetime64[ns]']

      for (let i = 0; i < this.conditionList.length; i++) {
        let str = "";
        let operator = "";
        let conditionOperator = this.conditionList[i].operator;
        let conditionValue = this.conditionList[i].value;

        let type = this.getType(this.conditionList[i].column);

        if (conditionValue == "") continue;

        for(let strType of strTypes) //如果该类型必须在pandas中为字符串才能判断，那么就将他转换成字符串
          if(strType == type)
            conditionValue = `"${conditionValue}"`;

        if (conditionOperator == "et") operator = "==";
        else if (conditionOperator == "ut") operator = "!=";
        else if (conditionOperator == "ge") operator = ">";
        else if (conditionOperator == "get") operator = ">=";
        else if (conditionOperator == "lt") operator = "<";
        else if (conditionOperator == "let") operator = "<=";
        else {
          this.$message.error("运算符出现未知错误");
          return;
        }

        if (i == 0) {
          str = `${this.conditionList[i].column}  ${operator}  ${conditionValue}`;
        } else
          str = ` ${this.conditionList[i].logic} ${this.conditionList[i].column} ${operator} ${conditionValue}`;

        condition += str;
      }

      if (condition.indexOf("and") == 0) {
        condition = condition.slice(3);
      }

      return condition
    },
    filter() {
        let condition = this.formatFilterParame()
        let sheet_name = this.sheetName

        let data = {
            condition,
            sheet_name
        }

        this.$axios.post('/filter',data)
        .then(res => {
            if(res.code == 200){
                this.$message({
                    type: 'success',
                    message: res.msg
                })
                this.$emit("set-filter-box-visble", false);

                this.$emit('reset-table', JSON.parse(res.data.json))
                this.$emit('set-record', res.data.record)

            }
            else this.$message.error(res.msg)
        })
    },
  },
};
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-around;
}

.content {
  height: 200px;
  overflow-y: scroll;
}
</style>